<template>
    <div>
        <ul>
            <li v-for="(item,index) in list" :key="index" >
                <div class="titles">
                    <div>{{item.name}}</div><div class="ck"> <div>待付款</div> </div>
                </div>
                <div class="contents">
                    <div class="leftimg">
                        <img :src="item.cShopImgSrc" alt="">
                    </div>
                    <div class="righttext">
                        <p>{{item.title}}</p>
                        <div class="num">
                            <div class="pricenum">{{item.ctype}}</div>
                            <div>x<span>{{item.num}}</span></div>
                        </div>
                        <p>￥<span>{{item.price*item.num}}</span></p>
                    </div>
                </div>
                <div class="nums">
                    <div>
                        {{item.allnumprice}}
                    </div>
                    <div class="btns">
                        <button @click="cancel(item)">取消订单</button>
                        <button @click="tobepaid">去付款</button>
                    </div>    
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    data(){
        return{
            list:[],
      
        }
    },
    methods:{
     
    },
     mounted(){
      let shuju=JSON.parse(localStorage.getItem("shangpindata"));
      console.log(shuju);
      this.list=shuju
    //   this.$store.getters.totalPrice

    },

}
</script>

<style scoped lang="less">
    li{
        padding: 10px 40px 30px 40px;
        font-size: 33px;
        margin-top: 20px;
        background-color: #fff;
        border-radius: 10px;
        .titles{
            display: flex;
            justify-content: space-between;
            .ck{
                font-size: 25px;
                color: red;
            }
        }
        .contents{
            display: flex;
            text-align: left;
            img{
                width: 180px;
            }
            .righttext{
                width: 70%;
                margin-left: 20px;
                line-height: 60px;
                font-size: 27px;
                .num{
                    display: flex;
                    justify-content: space-between;
                    .pricenum{
                        background-color: #f2f2f2;
                    }
                    :nth-child(1){
                        border-radius: 30px;
                        width: 300px;
                        height: 40px;
                        line-height: 40px;
                        font-size: 25px;
                        text-align: center;
                        margin-top: 10px;
                    }
                    :nth-child(2){
                        color: #d9d9d9;
                    }
                }
                :nth-child(3){
                    color: red;
                }
            }
            
        }
        .nums{
            display: flex;
            justify-content: space-between;
            width: 100%;
            font-size:25px;
            .btns{
                width: 50%;
                button{
                    width: 140px;
                    border: 4px solid #d0d0d0;
                    border-radius: 30px;
                    margin-left: 15px;
                    background-color: #fff;
                }
                :nth-child(1){
                    color: #d0d0d0;
                    border-color:#d0d0d0;
                }
                :nth-child(2){
                    color: red;
                    border-color:red;
                }
            }
        }
    }
</style>